<template>
    <el-card class="box-card" width="100%">
  <div slot="header" class="clearfix">
    <span>训练任务详情</span>
    <el-button style="float: right; padding: 1px 0; height: 35px; width: 55px" type="primary" @click="goBack()">返回</el-button>
  </div>
  <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="first">
  <div class="forms">
    <el-form ref="detailData" :rules="rules" :model="detailData" label-width="100px" class="train-form">
      <el-form-item label="训练任务id:" prop="id">
        <el-input v-model="detailData.id" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="名称：" prop="name">
        <el-input v-model="detailData.name" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="版本：" prop="version">
        <el-input v-model="detailData.version" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="训练数据集：" prop="train_dataset_id">
        <el-input v-model="detailData.train_dataset_id" disabled="true" style="width: 90%" ></el-input>
        <el-button type="primary" @click="showDatasetDetail(detailData.train_dataset_id)" style="float: right">查看</el-button>
      </el-form-item>
      <el-form-item label="验证数据集：" prop="val_dataset_id">
        <el-input v-model="detailData.val_dataset_id" disabled="true" style="width: 90%"></el-input>
        <el-button type="primary" @click="showDatasetDetail(detailData.val_dataset_id)" style="float: right">查看</el-button>
      </el-form-item>
      <el-form-item label="模型：" prop="model_id">
        <el-input v-model="detailData.model_id" disabled="true" style="width: 90%"></el-input>
        <el-button type="primary" @click="showModelDetail(detailData.model_id)" style="float: right">查看</el-button>
      </el-form-item>
      <el-form-item label="模型版本：" prop="model_commit_id">
        <el-input v-model="detailData.model_commit_id" disabled="true" style="width: 90%"></el-input>
        <el-button type="primary" @click="showModelVersionDetail(detailData.model_id, detailData.model_commit_id)" style="float: right">查看</el-button>
      </el-form-item>
      <el-form-item label="训练参数：" prop="train_args">
        <el-input v-model="detailData.train_args" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="资源使用：" prop="budget">
        <el-input v-model="detailData.budget" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="当前状态：" prop="status">
        <el-input v-model="detailData.status" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="开始时间：" prop="datetime_started">
        <el-input v-model="detailData.datetime_started" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="结束时间：" prop="datetime_stopped">
        <el-input v-model="detailData.datetime_stopped" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="描述：" prop="description">
        <el-input v-model="detailData.description" type="textarea" :rows="5" maxlength=500></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editTrainjobProcess()">保存编辑</el-button>
      </el-form-item>
    </el-form>
  </div>
  </el-tab-pane>
  <el-tab-pane label="训练日志" name="second">
    <div class="forms">
    <el-form ref="detailData" :rules="rules" :model="detailData" label-width="100px" class="train-form">
      <el-form-item label="日志：" prop="log">
        <el-input v-model="detailData.log" type="textarea" :rows="40" disabled="true"></el-input>
      </el-form-item>
    </el-form>
    </div>
  </el-tab-pane>
  </el-tabs>
</el-card>
</template>
<style scoped>
  .forms {
    font-size: 16px;
    text-align: left;
    margin-left: 1px;
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }

  .el-card__header {
    padding: 18px 20px;
    background-color: rgb(238, 241, 246);
  }

  .train-form {
    width: 90%;
    margin: 10px; /* 上下间距160px，左右自动居中*/
    background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
    padding: 10px;
    border-radius: 20px; /* 圆角 */
  }
</style>
<script>
import { getTrainjob, editTrainjob } from '@/api/request/trainjob'
import { getDatasetListAvailable } from '@/api/request/dataset'
import { getModelListAvailable } from '@/api/request/model'
export default {
  data () {
    return {
      detailData: null,
      activeName: 'first'
    }
  },
  methods: {
    update () {
      getTrainjob({trainjob_id: this.$route.query.trainjob_id}).then(response => {
        this.detailData = response
      })
      this.activeName = 'first'
    },
    goBack () {
      this.$router.go(-1)
    },
    editTrainjobProcess () {
      editTrainjob({trainjob_id: this.detailData.id, description: this.detailData.description}).then(response => {
      })
    },
    showDatasetDetail (id) {
      getDatasetListAvailable().then(response => {
        for (var idx in response) {
          if (response[idx].id === id) {
            this.$router.push({path: '/dataset/detail', query: {dataset_id: id, role: response[idx].role}})
            break
          }
        }
      })
    },
    showModelDetail (id) {
      getModelListAvailable().then(response => {
        for (var idx in response) {
          if (response[idx].id === id) {
            this.$router.push({path: '/model/detail', query: {model_id: id, role: response[idx].role}})
            break
          }
        }
      })
    },
    showModelVersionDetail (id, commitID) {
      this.$router.push({path: '/model/version/detail', query: {model_id: id, commit_id: commitID}})
    }
  },
  activated () {
    this.update()
  }
}
</script>
